<template>
    <el-main class="RiskList">
        <el-form
            :inline="true"
            class="demo-form-inline">
            <el-form-item label="巡检点编号：">
                <el-input v-model="formInline.patrolPointNo" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="巡检点名称：">
                <el-input v-model="formInline.patrolPointName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="button" @click="onSubmit"><i class="el-icon-search"></i>查询</el-button>
                <el-button type="button" @click="reset"><i class="el-icon-refresh-right"></i>重置</el-button>
            </el-form-item>
        </el-form>
        <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline">
            <el-form-item>
                <el-button type="button" @click="addBox" v-has="'add'"><i class="iconfont icon-add"></i>添加</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="list"
            border
            style="width: 100%">
            <el-table-column
                prop="id"
                label="序号"
                >
            </el-table-column>
            <el-table-column
                prop="patrolPointNo"
                label="巡检点编号"
            >
            </el-table-column>
            <el-table-column
                prop="patrolPointName"
                label="巡检点名称"
            >
            </el-table-column>
            <el-table-column
                prop="build"
                label="组织/建筑"
            >
            </el-table-column>
            <el-table-column
                prop="floor"
                label="楼层"
            >
            </el-table-column>
            <el-table-column
                prop="device"
                label="点位设备"
            >
            </el-table-column>
            <el-table-column
                prop="tag"
                label="标签二维码"
            >
            <template slot-scope="scope">
                <img :src="scope.row.tag" style="width: 30px;">
            </template>
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="editBox(scope.row)" type="text" size="small" v-has="'edit'">编辑</el-button>
                    <el-button @click="del(scope.row)" type="text" size="small" v-has="'del'">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                style="text-align: center"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="1"
                layout="total, sizes, prev, pager, next, jumper"
                :total=total>
            </el-pagination>
        </div>


        <!-- 遮罩层 -->
      <div class="mask" v-if="isShow1"></div>
      <!-- 增加和编辑弹出框 -->
      <div class="addBox" v-if="isShow2">
          <el-header style="height: 50px;">
              <span>新增设备</span>
              <i class="iconfont icon-x" @click="addDisappear" ></i>
          </el-header>
          <el-main>
              <p class="add-tip">基础信息</p>
              <div class="inp-box">
                  <div class="inp">
                      <p>
                          <span class="symbol">*</span>
                          <span>巡检点编号：</span>
                      </p>
                      <el-input v-model="add.id" placeholder="请输入内容" :disabled="disabled"></el-input>
                  </div>
                  <div class="inp">
                      <p>
                          <span class="symbol">*</span>
                          <span>巡检点名称：</span>
                      </p>
                      <el-input v-model="add.patrolPointName" placeholder="请输入内容"></el-input>
                  </div>
              </div>
              <div class="inp-box">
                  <div class="inp">
                      <p>
                          <span class="symbol">*</span>
                          <span>所属组织/建筑：</span>
                      </p>
                      <el-select v-model="add.build" placeholder="请选择">
                          <el-option
                          v-for="item in buildType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.label">
                          </el-option>
                      </el-select>
                  </div>
                  <div class="inp">
                      <p>
                          <span class="symbol">*</span>
                          <span>标签编号：</span>
                      </p>
                      <el-input v-model="add.tag" placeholder="请输入内容"></el-input>
                  </div>
              </div>
              <div class="inp-box">
                  <div class="inp">
                        <p>
                          <span class="symbol">*</span>
                          <span>楼层</span>
                      </p>
                      <el-input v-model="add.floor" placeholder="请输入内容"></el-input>
                  </div>
              </div>
              <div class="add-btn">
                  <div class="btn" @click="addDisappear">
                    <i class="iconfont icon-return"></i>
                      <span>取消</span>
                  </div>
                  <div class="btn" @click="addSave">
                    <i class="iconfont icon-save"></i>
                      <span>保存</span>
                  </div>
              </div>
          </el-main>
      </div>
</el-main>
</template>

<script>
export default {
    data() {
        return {
            list: [], //当前显示
            total: 0, //总条数
            current: 1, //当前显示页码
            limit:5,
            isShow1:false,
            isShow2:false,
            disabled:false,
            addNum:1,
            formInline: {
                "patrolPointName":'',
                "patrolPointNo":'',
                "build":''
            },
            tableData: [],
            add:{
                "build": "",
                "device": "",
                "floor": "",
                "id": 0,
                "patrolPointName": "",
                "patrolPointNo": "",
                "tag": ""
            },
            buildType:[
                {value:1,label: '综合办公楼'},
                {value:2,label: '产线厂房'},
                {value:3,label: '仓储楼'},
                {value:4,label: '活动中心'}
            ],
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        // 分页
        handleSizeChange(v) {
            console.log(`每页 ${v} 条`);
            this.limit=v;
            this.init();
        },
        handleCurrentChange(v) {
            console.log(`当前 ${v} 页`);
            this.current=v;
            this.init();
        },
        // 初始渲染列表
        init(){
            this.$axios({
                url:`/queryByPointCondition/${this.current}/${this.limit}`,
                method:'post',
                params:{
                    build:'产线厂房'
                }
            }).then((res)=>{
                console.log(res.data.code)
                if(res.data.code==200){
                    this.list=res.data.data
                    this.total=res.data.total;
                }else {
                    this.$message.error('数据加载失败')
                }
            })
        },
        // 重置按钮
        reset(){
           this.formInline={
                "patrolPointName":'',
                "patrolPointNo":'',
                "build":''
            }
            this.init()
        },
        // 搜索按钮
        onSubmit() {
            console.log(this.formInline)
            this.$axios({
                url:`/queryByPointCondition/${this.current}/${this.limit}`,
                method:'post',
                params:this.formInline
            }).then((res)=>{
                console.log(res.data.data)
                if(res.data.code==200){
                    this.list=res.data.data
                    this.total=res.data.total;
                    this.$message.success('数据加载成功!');
                }else {
                    this.$message.error("数据加载失败！");
                }
            })
        },
        // 取消
        addDisappear(){
            this.isShow1=false;
            this.isShow2=false;
            this.init();
        },
        // 增加
        addBox(){
            this.isShow1=true;
            this.isShow2=true;
            this.disabled=false;
            this.addNum=1;
        },
        // 编辑
        editBox(v){
            this.isShow1=true;
            this.isShow2=true;
            this.disabled=true;
            this.addNum=2;
            this.add={
                "build": v.build,
                "device": v.device,
                "floor": v.floor,
                "id": v.id,
                "patrolPointName": v.patrolPointName,
                "patrolPointNo": v.patrolPointNo,
                "tag": v.tag
            }
        },
        // 清除
        clean(){
          this.add={
            "build": "",
            "device": "",
            "floor": "",
            "id": 0,
            "patrolPointName": "",
            "patrolPointNo": "",
            "tag": ""
          }
        },
        // 保存
        addSave(){
            if(this.addNum==1){
                this.$axios({
                url:'/addPatrolPoint',
                method:'post',
                data:this.add
                }).then((res)=>{
                    console.log(res.data.msg);
                    if(res.data.msg=='success'){
                        this.clean();
                        this.addDisappear();
                        this.init();
                        this.$message.success('添加成功!');
                    }else {
              this.$message.error("添加失败！");
            }
                })
            }else{
                this.$axios({
                    url:'/updatePatrolPoint',
                    method:'PUT',
                    data:this.add
                }).then((res)=>{
                    console.log(res.data.msg);
                    if(res.data.msg=='success'){
                        this.addDisappear();
                        this.init();
                        this.$message.success('编辑成功!');
                    }else {
              this.$message.error("编辑失败！");
            }
                })
            }
        },
        // 删除
        del(v){
            this.$axios({
                url:`/deletePatrolPoint/${v.id}`,
                method:'delete'
            }).then((res)=>{
                // 查看搜索框内容
                console.log(res.data.msg);
                if(res.data.msg=='success'){
                    this.init();
                    this.$message.success('删除成功!');
                }else {
            this.$message.error("删除失败！");
          }
            })
        },
    }
}
</script>

<style lang="less" scoped>
a {
    text-decoration: none;
    color: #0a92fa;
}
.el-main{
    margin-left: 20px;
    padding: 20px;
    position: relative;
}
.RiskList {
    text-align: left;
    i {
        color: #0A92FA;
        font-weight: bold;
        vertical-align: middle;
        margin-right: 5px;
    }
    .block {
        position: fixed;
        bottom: 60px;
        left: 40%;
    }
    .el-form-item {
        margin-right: 40px;
    }
    .icon-add{
        margin-right: 10px;
        line-height: 19px;
    }
}


// 遮罩层
.mask{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.5);
    filter: opacity(60%);
    opacity: 60%;
    z-index: 3;
}
        
// 弹出框
.addBox{
    width: 720px;
    height: 400px;
    background: #fff;
    position:absolute;
    top: 50px;
    left: 240px;
    z-index: 5;
    // overflow: hidden;
    .el-header{
        height: 30px;
        line-height: 30px;
        background: #f2f2f2;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .el-main{
        background: #fff;
        height: 370px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        line-height: 50px;
        // padding: 0px 20px;
        margin-left: 0px;
        .add-tip{
            font-weight: 700;
        }
        .inp-box{
            width: 100%;
            height: 70px;
            display: flex;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            .inp{
                width: 300px;
                height: 70px;
                line-height: 35px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                .symbol{
                    color: red;
                }
                .el-input{
                    width: 300px;
                    height: 30px;
                    /deep/.el-input__inner{
                        width: 300px;
                        height: 30px;
                    }
                    
                }
                .el-select{
                    /deep/.el-input--suffix{
                        width: 300px;
                        height: 30px;
                    }
                    /deep/.el-input__inner{
                        width: 300px;
                        height: 30px;
                    }
                    /deep/.el-input__icon{
                        line-height: 30px;
                    }
                }

            }
        }
        .responsible-person{
            width: 660px;
            height: 114px;
            line-height: 20px;
            border-left:1px solid #d7d7d7 ;
            border-bottom:1px solid #d7d7d7 ;
            border-radius: 3px;
            .rp-top{
                height: 40px;
                line-height: 44px;
                display: flex;
                .rpt-l{
                    width: 120px;
                    border-top: 1px solid #d7d7d7;
                    border-left: 1px solid #d7d7d7;
                    border-radius: 3px;
                }
                .rpt-r{
                    flex: 1;
                    border-left:1px solid #d7d7d7 ;
                    border-bottom:1px solid #d7d7d7 ;
                    border-radius: 3px;
                    display:flex;
                    .iconfont{
                        margin-left: 10px;
                        font-size: 24px;
                        color:#1890ff;
                    }
                }
            }
            .rp-btm{
                height: 70px;
                line-height: 70px;
                display: flex;
                font-size: 14px;
                justify-content: space-evenly;
                border-right:1px solid #d7d7d7 ;
                border-radius: 3px;
                p{
                    display: flex;
                    // justify-content: space-around;
                    .symbol{
                        color: red;
                    }
                    .el-input{
                    width: 200px;
                    height: 30px;
                        /deep/.el-input__inner{
                            width: 200px;
                            height: 30px;
                        }
                    }
                }
                
            }
        }
        
    }
    
}
.add-btn{
    width:100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn{
        width: 80px;
        height: 35px;
        border: 1px solid #f2f2f2;
        border-radius: 3px;
        line-height: 35px;
        font-size: 14px;
        display: flex;
        justify-content: space-around;
        margin-right: 20px;
        &:hover{
            cursor: pointer;
            color: #fff;
            background: #1890ff;
            .iconfont{
                color: #fff;
            }
        }
        .iconfont{
            color: #1890ff;
            
        }
    }
}
</style>